﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Volume by price</title>
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->
    <script src="../lib//jquery.js" type="text/javascript"></script>
    <script src="../lib/mstar.flot1.js" type="text/javascript"></script>
    <!--<script src="../lib/jquery.flot.js" type="text/javascript"></script>-->
    <style>
    body{
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF none repeat scroll 0 0;
    color:#333333;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    margin:0; padding:0;}
    .input-box {
    border-color:#6B6B6B #B9B9B9 #DDDDDD;
    border-style:solid;
    border-width:1px;
    color:#333333;
    display:inline;
    font-size:93%;
    margin:4px 0 0;
    padding:2px 0 2px 2px;}
	.rtq-volumeByPriceHint{position:absolute;padding:3px 8px 3px 8px;border:1px #777 solid;white-space:nowrap;background-color:#b7b7b7;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;clear:both;cursor:pointer;z-index:50;}
    </style>
</head>
<body>
<div style="width:100%; float:left">
<div id="chart" style="width:800px; height:300px"></div>
</div>

<div style="width:100%; margin-top:30px; margin-left:10px;float:left">
<p>-------------------</p>
<div>number of points:<input id = "pNum" type="text" class="input-box"/></div>
<div><input value="Change numbers of data points" type="button" onclick="changePoint()" class = "btn"/></div>
<p>-------------------</p>
<div>width :<input id = "wd" type="text" class="input-box"/></div>
<div>height:<input id = "hg" type="text" class="input-box"/></div>
<div><input value="Change Size" type="button" onclick="changeSize()" class = "btn"/></div>
<p>-------------------</p>
<div><input value="Redraw" type="button" onclick="Redraw()" class = "btn"/></div>
<p>-------------------</p>
<div><input value="ReCreateChart" type="button" onclick="ReCreateChart()" class = "btn"/></div>
</div>
<div><input value="button" onclick="test()" value="Test"/></div>
</body>
<script>
var container = $("#chart");
var flotObj = null;
var num = 400;
var ticksize = 50;
var data = [{data:[[0,19,30,15],[0,30,50,25],[0,22,30,19],[0,32,50,12],[0,64,80,40],[0,32,50,32],[0,42,45,30],[0,55,55,40],[0,40,41,20],[0,31,51,27],[0,30,50,25],[0,22,30,19],[0,32,50,12],[0,64,80,40],[0,32,50,32],[0,42,45,30],[0,55,55,40],[0,40,41,20],[0,20,30,15],[0,30,50,25],[0,22,30,19],[0,32,50,12],[0,64,80,40],[0,32,50,32],[0,42,45,30],[0,55,55,40],[0,40,41,20],[0,32,50,12],[0,64,80,40],[0,32,50,32],[0,20,30,15],[0,30,50,25],[0,22,30,19],[0,32,50,12],[0,31,51,27],[0,30,50,25],[0,22,30,19],[0,32,50,12],[0,69,80,40]],lines:{show:true},yaxis:1,color:1}
]                   
function getOption(){
    return { xaxis: { mode:null,tickSize:ticksize,showLabel:true,ticks:null,
                      tickFormatter:null},       
                      yaxis: {labelWidth:50,labelHeight:12,min:0},  
					  grid:{hoverable:true}      
            };
}
function generateChartData(num) {
    var lineData =[], barData = [];
    for(var i = 0; i < data[0].data.length; i++) {
       // lineData[i] = [i,Math.random()*20+20];
	   data[0].data[i][0]=i;
    }
    //data[0].data = lineData;
}
function draw() {
    if (flotObj == null) {
        flotObj = new mstar.flot("chart",getOption());
    }
    flotObj.init(data);
}
generateChartData(400);
draw();

function changeSize() {
    var w = document.getElementById("wd").value;
    var d = document.getElementById("hg").value;
    if (flotObj != null) {
        flotObj.changeOutSize(parseFloat(w),parseFloat(d));
    }
}
function Redraw() {
    changeData()
    flotObj.init(data);
}
function changeData() {
    var oda ;
    for(var o = 0; o<data.length;o++) {
        oda = data[o].data;
        for(var i = 0; i < oda.length; i++) {
            oda[i][1] = oda[i][1]* (Math.random()+0.5);
        }
    }
}
function ReCreateChart() {
    changeData();
    if(flotObj != null){
        flotObj.clear();
    }
    flotObj = new mstar.flot("chart",getOption());
    flotObj.init(data); 
}
function changePoint(){
    var n = document.getElementById("pNum").value;
    num = isNaN(parseInt(n,10))?200:parseInt(n,10);
    generateChartData(num);
    ticksize = num /8;
    flotObj.setOption({xaxis:{tickSize:ticksize}});
    flotObj.init(data);
}
function test() {
    var dataUrl = flotObj.canvas.toDataURL("PNG");
}
</script>
</html>
